<template>
  <div class="spendForm">
    <div class="spendForm-header">
      <p>填写支出记录</p>
    </div>
    <div class="spendForm-content">
      <div id="form">
        <div class="form-group" v-on:click="spendMoney()">
          <div class="form-title">
            <p>支出金额</p>
          </div>
          <div class="spendMoney-content">0.00</div>
          <input type="hidden" id="spendMoney" name="spendMoney" value="0">
        </div>
        <div class="form-group" id="select-category" v-on:click="selectCategory()">
          <div class="form-title">
            <p>支出类型</p>
          </div>
          <div class="spendCatory-content"></div>
          <input type="hidden" id="spendCategory" name="spendCategory" value="">
        </div>
        <div class="form-group" id="select-account" v-on:click="selectAccount()">
          <div class="form-title">
            <p>账户类型</p>
          </div>
          <div class="spendAccount-content"></div>
          <input type="hidden" id="spendAccount" name="spendAccount" value="">
        </div>
        <div class="form-group" id="select-date" v-on:click="selectDate()">
          <div class="form-title">
            <p>日期</p>
          </div>
          <div class="spendDate-content">0000-00-00</div>
          <input type="hidden" id="spendDate" name="spendDate" value="">
        </div>
        <div class="form-group" id="select-time" v-on:click="selectTime()">
          <div class="form-title">
            <p>时间</p>
          </div>
          <div class="spendTime-content">00:00</div>
          <input type="hidden" id="spendTime" name="spendTime" value="">
        </div>
        <div class="form-group">
          <div class="form-title">
            <p>备注（描述信息）</p>
          </div>
          <textarea id="description" name="description" rows="6"></textarea>
        </div>
        <div class="form-footer">
          <input type="submit" id="submit" value="保存" v-on:click="submit()">
          <input id="reset" value=" 返回" v-on:click="goToBack()">
        </div>

      </div>
    </div>
    <dialogSelectTime v-on:resultTime="showTime"></dialogSelectTime>
    <dialogSelectDate v-on:resultDate="showDate"></dialogSelectDate>
    <dialogSelectCategory v-on:resultCategory="showCategory"></dialogSelectCategory>
    <dialogSelectAccount v-on:resultAccount="showAccount"></dialogSelectAccount>
    <calculator v-on:resultMoney="showMoney"></calculator>
    <dialogBox v-bind:message="error" v-bind:href="location" id="dialog"></dialogBox>
  </div>
</template>

<script>
    import dialogSelectTime from '../public/dialog-selectTme/dialog-selectTime.vue'
    import dialogSelectDate from '../public/dialog-selectDate/dialog-selectDate.vue'
    import dialogSelectCategory from '../public/dialog-selectCategory/dialog-selectCategory.vue'
    import dialogSelectAccount from '../public/dialog-selectAccount/dialog-selectAccount.vue'
    import calculator from '../public/calculator/calculator.vue'
    import dialogBox from '../public/dialog-box/dialog-box.vue'
    export default {
        name: '',
        data () {
            return {
                date: '',
                time: '',
                error:'',
                location:''
            }
        },
      components:{dialogSelectTime,dialogSelectDate,dialogSelectCategory,dialogSelectAccount,calculator,dialogBox},
      created:function () {
      },
      mounted:function () {
        //如果route上面有带参数data_id，则进行编辑上的数据请求
        if(this.$route.query.id){
          this.edit(this.$route.query.id);
        }
        //初始化时隐藏相关组件
        $('.selectDate').hide();
        $('.selectTime').hide();
        $('.selectCategory').hide();
        $('.selectAccount').hide();
        $('.calculator').hide();
        $('#dialog').hide();
        //点击样式发生改变
        $('.form-group').click(function () {
          $(this).css({'background-color':'#FFF8DC'});
          $(this).siblings().css({'background-color':'#ffffff'});
          $(this).find('#spendMoney').css({'background-color':'#FFF8DC'});
          $(this).find('textarea').css({'background-color':'#FFF8DC'});
          $(this).siblings().find('#spendMoney').css({'background-color':'#ffffff'});
          $(this).siblings().find('textarea').css({'background-color':'#ffffff'});
          //给date数据赋值
          let date=new Date();
          this.date=(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()).toString();

        })

      },
      methods:{
            showMoney:function (data) {
              $('.spendMoney-content').text(data=='NaN'?'0.00':data);
              $('#spendMoney').val(data=='NaN'?'0.00':data);
            },
            showTime:function (data) {
              $('.spendTime-content').text(data);
              $('#spendTime').val(data);
            },
            showDate:function (data) {
              $('.spendDate-content').text(data);
              $('#spendDate').val(data);
            },
            showCategory:function (data) {
              $('.spendCatory-content').html(data);
              let value=$('.spendCatory-content p').text();
              $('#spendCategory').val(value);
            },
            showAccount:function (data) {
              $('.spendAccount-content').html(data);
              let value=$('.spendAccount-content p').text();
              $('#spendAccount').val(value);
            },
            selectTime:function () {
              $('.selectTime').show();
            },
            selectDate:function () {
              $('.selectDate').show();
            },
            selectCategory:function () {
              $('.selectCategory').show();
            },
            selectAccount:function () {
              $('.selectAccount').show();
            },
            spendMoney:function () {
              $('.calculator').show();
            },
            submit:function () {
              let that=this;
              let spendMoney=$('#spendMoney').val();
              let spendCategory=$('#spendCategory').val();
              let spendAccount=$('#spendAccount').val();
              let spendDate=$('#spendDate').val();
              let spendTime=$('#spendTime').val();
              let description=$('#description').val();
              let category_logo=$('.spendCatory-content i').attr('class');
              let account_logo=$('.spendAccount-content i').attr('class');

              let submitData={
                user_id: sessionStorage.getItem('id'),
                token:sessionStorage.getItem('token'),
                _id:that.$route.query.id?that.$route.query.id:'',
                spendMoney:spendMoney,
                spendCategory:spendCategory,
                spendAccount:spendAccount,
                spendDate:spendDate,
                spendTime:spendTime,
                description:description,
                category_logo:category_logo,
                account_logo:account_logo
              };

              if(spendCategory==''){
                  this.error='请选择消费记录中的“支出类型”！';
                  $('#dialog').show();
                  return false;
              }else if(spendAccount==''){
                  this.error='请选择消费记录中的“账户类型”！';
                  $('#dialog').show();
                  return false;
              }else if(spendDate==''){
                  this.error='请选择消费记录中的“日期”！';
                  $('#dialog').show();
                  return false;
              }else if(spendTime==''){
                  this.error='请选择消费记录中的“时间”！';
                  $('#dialog').show();
                  return false;
              }else {
                if(that.$route.query.id){
                    that.$ajax.post('/api/spendEditSubmit',submitData).then(function (response) {
                      that.error=response.data.success;
                      that.location='/#/index';
                      $('#dialog').show();
                    }).catch(function (error) {
                      that.error=error.response.data.error.message||error.response.data.error;
                      that.location='/#/login';
                      $('#dialog').show();
                      $('#loading').hide();
                    })
                }else {
                  that.$ajax.post('/api/spendMoney', submitData).then(function (response) {
                    location.href='/#/index';
                  }).catch(function (error) {
                    if(error.response){
                      that.error=error.response.data.error.message||error.response.data.error;
                      that.location='/#/login';
                      $('#dialog').show();
                      $('#loading').hide();
                    }
                  })
                }
              }
            },
            edit:function (data) {
              let that=this;
              let requestData={
                user_id: sessionStorage.getItem('id'),
                token:sessionStorage.getItem('token'),
                id:data
              }
              this.$ajax.get('/api/spendEdit',{params:requestData}).then(function (response) {
                $('#spendMoney').val(response.data.data.spendMoney);
                $('#spendCategory').val(response.data.data.spendCategory);
                $('#spendAccount').val(response.data.data.spendAccount);
                $('#spendDate').val(response.data.data.spendDate);
                $('#spendTime').val(response.data.data.spendTime);
                $('#description').val(response.data.data.description);

                $('.spendMoney-content').text(response.data.data.spendMoney.toFixed(2));
                $('.spendCatory-content').html('<i class="'+response.data.data.category_logo+'"></i><p>'+response.data.data.spendCategory+'</p>');
                $('.spendAccount-content').html('<i class="'+response.data.data.account_logo+'"></i><p>'+response.data.data.spendAccount+'</p>');
                $('.spendDate-content').text(response.data.data.spendDate);
                $('.spendTime-content').text(response.data.data.spendTime);
              }).catch(function (error) {
                if(error.response){
                  that.error=error.response.data.error.message||error.response.data.error;
                  that.location='/#/login';
                  $('#dialog').show();
                  $('#loading').hide();
                }
              })
            },
            goToBack:function () {
              javascript:history.back(-1);
            }
      }
    }
</script>

<style>
  @import "css/spendForm.css";
</style>
